<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>资源管理 - 1024导航后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB',
                        danger: '#EF4444'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .sidebar-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .btn-action {
                @apply p-1.5 rounded hover:bg-gray-100 transition-colors;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800">
    <div class="flex h-screen overflow-hidden">
        <!-- 侧边栏 -->
        <aside class="w-64 bg-white shadow-sm flex-shrink-0 hidden md:block overflow-y-auto">
            <div class="p-4 border-b border-gray-100">
                <div class="text-primary text-xl font-bold">1024<span class="text-secondary">管理后台</span></div>
            </div>

            <nav class="p-4 space-y-1">
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-tachometer w-5 text-center mr-3"></i>
                    <span>控制台</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm sidebar-active rounded">
                    <i class="fa fa-th-large w-5 text-center mr-3"></i>
                    <span>资源管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-wrench w-5 text-center mr-3"></i>
                    <span>工具管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-users w-5 text-center mr-3"></i>
                    <span>用户管理</span>
                    <span class="ml-auto bg-primary text-white text-xs px-2 py-0.5 rounded-full">128</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-comments w-5 text-center mr-3"></i>
                    <span>社区内容</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-line-chart w-5 text-center mr-3"></i>
                    <span>数据统计</span>
                </a>

                <div class="border-t border-gray-100 my-3"></div>

                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-cog w-5 text-center mr-3"></i>
                    <span>系统设置</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-question-circle w-5 text-center mr-3"></i>
                    <span>帮助中心</span>
                </a>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航 -->
            <header class="bg-white shadow-sm z-10">
                <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                    <button class="md:hidden text-gray-600 text-xl">
                        <i class="fa fa-bars"></i>
                    </button>

                    <div class="flex items-center space-x-4 ml-auto">
                        <div class="relative">
                            <button class="text-gray-600 hover:text-primary transition-colors">
                                <i class="fa fa-bell text-xl"></i>
                                <span
                                    class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">3</span>
                            </button>
                        </div>

                        <div class="relative group">
                            <button
                                class="flex items-center space-x-2 px-3 py-1.5 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
                                <img src="https://picsum.photos/id/1005/40/40" alt="管理员头像"
                                    class="w-8 h-8 rounded-full object-cover">
                                <span class="hidden md:inline-block text-sm font-medium">管理员</span>
                                <i class="fa fa-angle-down text-gray-500"></i>
                            </button>
                            <div
                                class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-10 hidden group-hover:block">
                                <a href="profile.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                                <a href="settings.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">账号设置</a>
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">退出登录</a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 页面内容 -->
            <main class="flex-1 overflow-y-auto bg-gray-50 p-4 md:p-6">
                <div class="max-w-7xl mx-auto">
                    <!-- 页面标题 -->
                    <div class="mb-6">
                        <h1 class="text-2xl font-bold text-gray-800">资源管理</h1>
                        <p class="text-gray-500 mt-1">管理、编辑和审核平台上的所有资源</p>
                    </div>

                    <!-- 数据概览 -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                        <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm">总资源数</p>
                                    <h3 class="text-2xl font-bold mt-1">1,284</h3>
                                </div>
                                <div
                                    class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                                    <i class="fa fa-database"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center text-sm">
                                <span class="text-green-600 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 12.5%
                                </span>
                                <span class="text-gray-500 ml-2">较上月</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm">待审核</p>
                                    <h3 class="text-2xl font-bold mt-1">24</h3>
                                </div>
                                <div
                                    class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600">
                                    <i class="fa fa-clock-o"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center text-sm">
                                <span class="text-red-600 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 8.3%
                                </span>
                                <span class="text-gray-500 ml-2">较上月</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm">今日新增</p>
                                    <h3 class="text-2xl font-bold mt-1">12</h3>
                                </div>
                                <div
                                    class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                                    <i class="fa fa-plus-circle"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center text-sm">
                                <span class="text-green-600 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 3.2%
                                </span>
                                <span class="text-gray-500 ml-2">较昨日</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm">被举报</p>
                                    <h3 class="text-2xl font-bold mt-1">5</h3>
                                </div>
                                <div
                                    class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600">
                                    <i class="fa fa-exclamation-triangle"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center text-sm">
                                <span class="text-green-600 flex items-center">
                                    <i class="fa fa-arrow-down mr-1"></i> 16.7%
                                </span>
                                <span class="text-gray-500 ml-2">较上周</span>
                            </div>
                        </div>
                    </div>

                    <!-- 资源趋势图表 -->
                    <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="text-lg font-bold text-gray-800">资源增长趋势</h2>
                            <div class="flex space-x-2">
                                <button class="px-3 py-1 text-sm bg-primary text-white rounded">周</button>
                                <button
                                    class="px-3 py-1 text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 rounded transition-colors">月</button>
                                <button
                                    class="px-3 py-1 text-sm bg-gray-100 text-gray-700 hover:bg-gray-200 rounded transition-colors">年</button>
                            </div>
                        </div>
                        <div class="h-64">
                            <canvas id="resourceChart"></canvas>
                        </div>
                    </div>

                    <!-- 资源管理工具栏 -->
                    <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
                        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                            <div class="flex flex-1 flex-col sm:flex-row gap-4">
                                <div class="relative flex-1 max-w-md">
                                    <input type="text" placeholder="搜索资源名称、URL或描述..."
                                        class="w-full px-4 py-2 pl-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                    <i class="fa fa-search absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"></i>
                                </div>

                                <div class="flex gap-4">
                                    <select
                                        class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
                                        <option value="">全部分类</option>
                                        <option value="dev">开发工具</option>
                                        <option value="design">设计资源</option>
                                        <option value="education">学习教育</option>
                                        <option value="entertainment">影音娱乐</option>
                                        <option value="shopping">电商购物</option>
                                        <option value="tools">实用工具</option>
                                        <option value="images">图片素材</option>
                                    </select>

                                    <select
                                        class="px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
                                        <option value="">全部状态</option>
                                        <option value="active">已通过</option>
                                        <option value="pending">待审核</option>
                                        <option value="rejected">已拒绝</option>
                                        <option value="reported">被举报</option>
                                    </select>
                                </div>
                            </div>

                            <button
                                class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center">
                                <i class="fa fa-plus mr-2"></i> 新增资源
                            </button>
                        </div>
                    </div>

                    <!-- 资源列表 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden">
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="bg-gray-50 border-b border-gray-200">
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-10">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </th>
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            ID</th>
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            名称</th>
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            分类</th>
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            URL</th>
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            热度</th>
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            状态</th>
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            添加时间</th>
                                        <th
                                            class="px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            操作</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    <!-- 资源项1 -->
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#1024</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div
                                                    class="w-8 h-8 rounded bg-blue-100 flex items-center justify-center text-primary mr-3">
                                                    <i class="fa fa-code"></i>
                                                </div>
                                                <div>
                                                    <div class="font-medium text-gray-900">在线代码编辑器</div>
                                                    <div class="text-gray-500 text-xs mt-0.5">无需安装，在线编写代码</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">开发工具</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 max-w-xs truncate">
                                            https://codeeditor.example.com</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <i class="fa fa-fire text-orange-500 mr-1"></i> 12.5k
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已通过</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-09-15</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex justify-end space-x-1">
                                                <button class="btn-action text-gray-600 hover:text-primary" title="查看">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn-action text-gray-600 hover:text-primary" title="编辑">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                                <button class="btn-action text-gray-600 hover:text-danger" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- 资源项2 -->
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#1023</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div
                                                    class="w-8 h-8 rounded bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
                                                    <i class="fa fa-paint-brush"></i>
                                                </div>
                                                <div>
                                                    <div class="font-medium text-gray-900">免费UI设计模板</div>
                                                    <div class="text-gray-500 text-xs mt-0.5">高质量UI设计资源</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">设计资源</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 max-w-xs truncate">
                                            https://uitemplates.example.com</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <i class="fa fa-fire text-orange-500 mr-1"></i> 8.3k
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已通过</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-09-14</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex justify-end space-x-1">
                                                <button class="btn-action text-gray-600 hover:text-primary" title="查看">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn-action text-gray-600 hover:text-primary" title="编辑">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                                <button class="btn-action text-gray-600 hover:text-danger" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- 资源项3（待审核） -->
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#1022</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div
                                                    class="w-8 h-8 rounded bg-amber-100 flex items-center justify-center text-amber-600 mr-3">
                                                    <i class="fa fa-graduation-cap"></i>
                                                </div>
                                                <div>
                                                    <div class="font-medium text-gray-900">AI学习路径</div>
                                                    <div class="text-gray-500 text-xs mt-0.5">人工智能入门到精通</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">学习教育</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 max-w-xs truncate">
                                            https://ailearning.example.com</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <i class="fa fa-fire text-orange-500 mr-1"></i> 0
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium bg-amber-100 text-amber-800 rounded-full">待审核</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-09-14</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex justify-end space-x-1">
                                                <button class="btn-action text-gray-600 hover:text-primary" title="查看">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn-action text-gray-600 hover:text-primary" title="编辑">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                                <button class="btn-action text-green-600 hover:text-green-700"
                                                    title="通过">
                                                    <i class="fa fa-check"></i>
                                                </button>
                                                <button class="btn-action text-red-600 hover:text-red-700" title="拒绝">
                                                    <i class="fa fa-times"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- 资源项4（被举报） -->
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#1021</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div
                                                    class="w-8 h-8 rounded bg-red-100 flex items-center justify-center text-red-600 mr-3">
                                                    <i class="fa fa-film"></i>
                                                </div>
                                                <div>
                                                    <div class="font-medium text-gray-900">影视资源站</div>
                                                    <div class="text-gray-500 text-xs mt-0.5">高清影视在线观看</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">影音娱乐</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 max-w-xs truncate">
                                            https://movies.example.com</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <i class="fa fa-fire text-orange-500 mr-1"></i> 23.1k
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full">被举报</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-09-12</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex justify-end space-x-1">
                                                <button class="btn-action text-gray-600 hover:text-primary" title="查看">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn-action text-primary hover:text-primary/80"
                                                    title="处理举报">
                                                    <i class="fa fa-gavel"></i>
                                                </button>
                                                <button class="btn-action text-gray-600 hover:text-danger" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- 资源项5 -->
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">#1020</td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-center">
                                                <div
                                                    class="w-8 h-8 rounded bg-teal-100 flex items-center justify-center text-teal-600 mr-3">
                                                    <i class="fa fa-image"></i>
                                                </div>
                                                <div>
                                                    <div class="font-medium text-gray-900">无版权图库</div>
                                                    <div class="text-gray-500 text-xs mt-0.5">免费可商用图片资源</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">图片素材</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 max-w-xs truncate">
                                            https://freestock.example.com</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            <i class="fa fa-fire text-orange-500 mr-1"></i> 14.2k
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">已通过</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2023-09-10</td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex justify-end space-x-1">
                                                <button class="btn-action text-gray-600 hover:text-primary" title="查看">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn-action text-gray-600 hover:text-primary" title="编辑">
                                                    <i class="fa fa-edit"></i>
                                                </button>
                                                <button class="btn-action text-gray-600 hover:text-danger" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- 分页 -->
                        <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
                            <div class="flex items-center">
                                <p class="text-sm text-gray-500">
                                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span
                                        class="font-medium">1,284</span> 条
                                </p>
                                <div class="ml-4">
                                    <select
                                        class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                        <option>10条/页</option>
                                        <option>20条/页</option>
                                        <option>50条/页</option>
                                        <option>100条/页</option>
                                    </select>
                                </div>
                            </div>

                            <div class="flex items-center space-x-1">
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                                    disabled>
                                    <i class="fa fa-angle-left"></i>
                                </button>
                                <button
                                    class="px-3 py-1 text-sm border border-primary bg-primary text-white rounded-md">1</button>
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">2</button>
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">3</button>
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">4</button>
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">5</button>
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">
                                    <i class="fa fa-angle-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 回到顶部按钮 -->
    <button id="backToTop"
        class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 回到顶部按钮功能
        const backToTopBtn = document.getElementById('backToTop');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 资源趋势图表
        const ctx = document.getElementById('resourceChart').getContext('2d');
        const resourceChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
                datasets: [{
                    label: '新增资源',
                    data: [15, 23, 18, 28, 21, 12, 9],
                    borderColor: '#3B82F6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.3,
                    fill: true
                }, {
                    label: '审核通过',
                    data: [12, 19, 15, 22, 18, 10, 7],
                    borderColor: '#10B981',
                    backgroundColor: 'rgba(16, 185, 129, 0.1)',
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true
                    }
                }
            }
        });

        // 侧边栏切换（移动端）
        document.querySelector('.md\\:hidden').addEventListener('click', () => {
            const sidebar = document.querySelector('aside');
            sidebar.classList.toggle('hidden');
            sidebar.classList.toggle('absolute');
            sidebar.classList.toggle('top-0');
            sidebar.classList.toggle('left-0');
            sidebar.classList.toggle('h-full');
            sidebar.classList.toggle('z-50');
        });
    </script>
</body>

</html>